<template>
    <div class="dashboard">
      <Sidebar />

      <main class="content">
        <section class="intro-banner">
  <div class="banner-content">
    <div>
      <h2>智能学情分析</h2>
      <p>AI与教学评估深度融合，精准实现了学生个体水平和需求差异的数据化评估。</p>
    </div>
    <el-button class="custom-button">深入了解</el-button>
  </div>
  <div class="third-square"></div>
</section>


        <section class="charts">
  <div class="chart attention-curve">
    <el-card title="注意力曲线" class="chart-card1">
      <!-- 在这里插入图表 -->
      <div>注意力曲线</div>
    </el-card>
  </div>

  <div class="charts-row">
    <div class="chart participation">
      <el-card title="课堂参与度" class="chart-card">
        <div>课堂参与度</div>
      </el-card>
    </div>
    <div class="chart attendance">
      <el-card title="课堂出勤情况" class="chart-card">
        <div>课堂出勤情况</div>
      </el-card>
    </div>
  </div>
</section>


        <section class="video-monitor">
          <el-card class="video-card" :body-style="{ padding: '20px' }">
            <h3>课堂实时监控</h3>
            <div class="video-placeholder">
              <el-button type="primary" size="large">播放</el-button>
            </div>
          </el-card>
        </section>
      </main>
    </div>
  </template>

  <script>
  import Sidebar from '@/components/Sidebar.vue';

  export default {
    name: "Dashboard",
    components: {
      Sidebar
    }
  };
  </script>

  <style scoped>
  .dashboard {
    display: flex;
    background-color: #f8f8f8;
    height: 100vh;
  }

  .content {
    flex: 1;
    padding: 20px;
  }

  .custom-button {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.custom-button:hover {
  background-color: #0056b3;
}

.intro-banner {
position: relative;
  background-color: #8FC6FF;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  width: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 160px;
  overflow: hidden;
}
.intro-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50;
  width: 120px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}


.intro-banner::after {
  content: '';
  position: absolute;
  top: 100px;
  left: 310px;
  width: 120px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}


.third-square {
  position: absolute;
  top: 135px;
  left: 230px;
  width: 110px;
  height: 80px;
  background-color: white;
  transform: rotate(-50deg);
  z-index: 0;
  border-radius: 4px;
}

.banner-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2 ;
}

.banner-content div {
  max-width: 70%;
  margin-right: 100px;
  flex: 1;
}

.banner-content h2 {
  font-size: 18px;
  color: white;
  text-align: left;
  margin: 0;
}

.banner-content p {
  margin: 0;
  color: rgb(10, 10, 10);
  font-size: 13px;
  text-align: left;
  margin-top: 10px;
}

.custom-button {
  background-color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  margin-top: 60px;
  margin-right: 30px;
}

.custom-button:hover {
  background-color: #e0e0e0;
}


  .charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart {
  flex: none;
  width: 200px;
}

.charts-row {
  display: flex;
  justify-content: flex-start;
  gap: 50px;
}

.chart-card1 {
  width: 580px;
  height: 270px;
}
.chart-card {
  height: 250px;
}
.participation,
.attendance {
  width: 265px;
  margin: 0;
}

.video-monitor {
  margin-top: -700px;
  display: flex;
  justify-content: flex-end;
}

.video-card {
  background-color: white;
  width: 50%;
  height: 650px;
}

  .video-placeholder {
    height: 600px;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: relative;
  }

  .video-placeholder .el-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  </style>
